@import "../../styles/mixin";
//
.k-mask {
  position: relative;
  &-cover {
    transition: all 0.3s;
    .size(100vw, 100vh);
    .custom-position(fixed, @top:0, @left:0, @zindex: @zindex-mask);
  }
  &-center {
    .center-middle-flex;
    flex-flow: column wrap;
  }
  .content {
    width: 100%;
    min-height: 120rpx;
    text-align: center;
    color: @font-initialize-color;
    z-index: @zindex-mask+1!important;
    > img {
      width: 100%;
    }
    &-bottom {
      .custom-position(fixed, @bottom:0);
    }
  }
  .animation {
    &-in {
      &-bottom {
        animation: slideInUp 0.35s ease-in-out 1;
      }
    }
    &-out {
      &-bottom {
        animation: slideOutDown 0.35s ease-out 1;
      }
    }
  }
  .close {
    opacity: 0.8;
    margin-top: 0.8rem;
    text-align: center;
  }
}
